import { z } from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Button } from '@/components/ui/button'

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { adminPassword } from '@/api/account'
import { toast } from 'sonner'
import { useAuthStore } from '@/stores/authStore'
const accountFormSchema = z.object({
  old_password: z
    .string()
    .min(1, '请输入原密码')
    .max(30, 'Name must not be longer than 30 characters.'),
  password: z
    .string()
    .min(5, 'Name must be at least 5 characters.')
    .max(30, 'Name must not be longer than 30 characters.'),
  password_confirm: z
    .string()
    .min(5, 'Name must be at least 5 characters.')
    .max(30, 'Name must not be longer than 30 characters.'),
}).refine(data => data.password === data.password_confirm, {
  message: 'Passwords do not match',
  path: ['password_confirm'],
})

type AccountFormValues = z.infer<typeof accountFormSchema>

// This can come from your database or API.
const defaultValues: Partial<AccountFormValues> = {
  old_password: '',
  password: '',
  password_confirm: '',
}

export function AccountForm() {
  const form = useForm<AccountFormValues>({
    resolver: zodResolver(accountFormSchema),
    defaultValues,
  })


  function onSubmit(data: AccountFormValues) {
    adminPassword(data).then((res) => {
      // 处理密码修改响应
      if (res.data.code == 0) {
        toast.success(res.data.msg)
        useAuthStore.persist.clearStorage()
        window.location.reload()
      } else {
        toast.error(res.data.msg)
      }
    })
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
        <FormField
          control={form.control}
          name='old_password'
          render={({ field }) => (
            <FormItem>
              <FormLabel>原密码</FormLabel>
              <FormControl>
                <Input placeholder='请输入原密码' type='password' {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name='password'
          render={({ field }) => (
            <FormItem>
              <FormLabel>新密码</FormLabel>
              <FormControl>
                <Input placeholder='请输入新密码' type='password' {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name='password_confirm'
          render={({ field }) => (
            <FormItem>
              <FormLabel>确认新密码</FormLabel>
              <FormControl>
                <Input placeholder='请再次输入新密码' type='password' {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type='submit'>Update account</Button>
      </form>
    </Form>
  )
}
